@charset "utf-8";

$fontsize:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$fontsize*1rem;
}


.web_login_yet{
    position: absolute;
    top: r(90px);
    bottom: r(95px);
    width: 0;
    transition: all .5s linear;
    background: #222;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
    opacity: 1;
    .nav{
        width: r(611px);
        height: r(85px);
        margin: 0 auto;
        border-bottom: r(1px) solid #484848;
        padding-bottom: r(16px);
        position: relative;
        margin-bottom: r(25px);
    }
    .close_wrap{
        width: r(50px);
        height: r(50px);
        position: absolute;
        top: r(16px);
        left: 0;
        img{
            width: 100%;
        }
    }
    .login_content{
        width: r(460px);
        margin: 0 auto;
        margin-bottom: r(62px);
        .head_portrait_wrap{
            width: r(130px);
            height: r(130px);
            margin: 0 auto;
            border-radius: 50%;
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        .personal_details{
            font-size: 0;
            .name_wrap{
                color: #fff;
                text-align: center;
                padding-left: 8%;
                .name{
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 14px;
                    margin-right: r(5px);
                    line-height: r(24px);
                }
                & > span{
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 12px;
                    /*缩小到66%*/
                    transform: scale(0.7666);
                    /*控制缩小的基准点*/
                    transform-origin: left top;
                    /*禁止换行*/
                    white-space: nowrap;
                    border: r(1px) solid #fff;
                    padding: r(1px) r(5px);
                    line-height: r(24px);
                    height: r(31px);
                    margin-top: r(10px);
                }
            }
            .classification{
                display: flex;
                justify-content: space-around;
                width: r(123px);
                margin: 0 auto;
                .star_wrap{
                    display: inline-block;
                    width: r(21px);
                    img{
                        width: 100%;
                    }
                }
            }
            .concern{
                font-size: 14px;
                color: #fff;
                text-align: center;
                display: flex;
                justify-content: center;
                p{
                    display: inline-block;
                    &:nth-of-type(2){
                        margin: 0 r(8px);
                    }
                    span{
                        color: #820f13;
                        font-size: 12px;
                    }
                }
            }
            .btn_wrap{
                display: flex;
                justify-content: center;
                margin-top: r(16px);
                input{
                    color: #fff;
                    width: r(220px);
                    border-radius: r(50px);
                    line-height: r(50px);
                    &:first-of-type{
                        margin-left: r(-10px);
                       background: #b60005;
                    }
                    &:last-of-type{
                        margin-left: r(20px);
                        background: #cdcdcd;
                    }
                }
            }
        }
    }
    .segment_line_t{
        height: r(24px);
        width: 100%;
        background: #303030;
    }
    .list_wrap{
        width: r(575px);
        margin: 0 auto;
        margin-bottom: r(54px);
        .list_content{
            li{
                border-bottom: r(1px) solid #2d2d2d;
                margin-top: r(30px);
                p{
                    line-height: r(88px);
                    font-size: 14px;
                    color: #fff;
                    border-bottom: r(1px) solid #2d2d2d;
                }
                span{
                    float: right;
                    margin-right: r(8px);
                    &::after{
                        content: "";
                        clear: both;
                        display: block;
                    }
                }
                .sec_menu_details{
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                    width: r(430px);
                    margin: 0 auto;
                    display: none;
                    overflow: hidden;
                    &>li{
                        line-height: r(88px);
                        &:last-of-type{
                            border-bottom: none;
                        }
                    }
                }
                &:first-of-type{
                    margin-top: 0;
                }
                &:last-of-type{
                    border-bottom: none;
                }
            }
        }
    }
    .excit{
        width: r(180px);
        height: r(52px);
        margin: 0 auto;
        background: #b60005;
        font-size: 14px;
        color: #fff;
        text-align: center;
        line-height: r(52px);
        border-radius: 50px;
    }
}

.login_dis_yet_open{
    width: 100%;
    z-index: 201;
}
.login_dis_off{
//  width: 0;
    opacity: 0;
}

